<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>购物车</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="css/public.css">
	<link rel="stylesheet" type="text/css" href="css/main_style.css">
	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js"></script>
	<script type="text/javascript" src="js/fontsize.js"></script>
	<script type="text/javascript" src="js/public.js"></script>
</head>
<body class="pb100 bg-gray-f0">
<!-- 顶部 -->
<div class="head white head_cen f26"><a class="iconfont back white" href="javascript:history.go(-1);">&#xe60c;</a><span class="f34 txt-center">购物车</span><!--<a href="javascript:;" class="edit txt-right white">编辑</a>--></div>
<!-- 页脚导航 -->
<div class="foot bg-white select_all">
	<div class="p10 ml10 mr10 clearfix f26">
		<div class="fl"><i class="iconfont check vertical_middle"></i><span class="vertical_middle ml10">全选</span></div>
		<div class="txt-right fr">总计：<span class="red mr40">￥<i class="total"></i></span><a href="confirm_order.html" class="white btn_billing confirm_order">去结算(<i class="sum_num"></i>)</a></div>
	</div>
</div>
<!-- 购物车 -->
<div class="carts">
	<ul class="bg-white mb10 pt20 pb20">
		<li class="carts_check"><i class="iconfont check" id="001"></i></li>
		<li class="carts_img full_img"><a href="#"><img src="images/none/p-3.jpg"></a></li>
		<li class="carts_info pl20 pr20">
			<h5 class="normal f20"><a href="#" class="txt-nowrap">  Braun/博朗欧乐 BType3744 电动牙刷博朗欧乐 BType3744 电动牙刷</a></h5>
			<p class="f18 gray_90">颜色：<span>蓝色</span></p>
			<div class="red f22">￥<span class="price">1.01</span></div>
			<div class="num_box f18"><i class="btn-del fr">删除</i><a href="javascript:;" class="btn_less">-</a><span class="num">3</span><a href="javascript:;" class="btn_plus">+</a></div>
		</li>
	</ul>
	<ul class="bg-white mb10 pt20 pb20">
		<li class="carts_check"><i class="iconfont check checked" id="002">&#xe610;</i></li>
		<li class="carts_img full_img"><a href="#"><img src="images/none/p-3.jpg"></a></li>
		<li class="carts_info pl20 pr20">
			<h5 class="normal f20"><a href="#" class="txt-nowrap">Braun/博朗欧乐 BType3744 电动牙刷博朗欧乐 BType3744 电动牙刷</a></h5>
			<p class="f18 gray_90">颜色：<span>蓝色</span></p>
			<div class="red f22">￥<span class="price">10.00</span></div>
			<div class="num_box f18"><i class="btn-del fr">删除</i><a href="javascript:;" class="btn_less">-</a><span class="num">1</span><a href="javascript:;" class="btn_plus">+</a></div>
		</li>
	</ul>
	<ul class="bg-white mb10 pt20 pb20">
		<li class="carts_check"><i class="iconfont check checked" id="003">&#xe610;</i></li>
		<li class="carts_img full_img"><a href="#"><img src="images/none/p-3.jpg"></a></li>
		<li class="carts_info pl20 pr20">
			<h5 class="normal f20"><a href="#" class="txt-nowrap">Braun/博朗欧乐 BType3744 电动牙刷博朗欧乐 BType3744 电动牙刷</a></h5>
			<p class="f18 gray_90">颜色：<span>蓝色</span></p>
			<div class="red f22">￥<span class="price">99.00</span></div>
			<div class="num_box f18"><i class="btn-del fr">删除</i><a href="javascript:;" class="btn_less">-</a><span class="num">1</span><a href="javascript:;" class="btn_plus">+</a></div>
		</li>
	</ul>

</div>
<div>总计：<input type="hidden" id="totalcartnumb" /></div>
<div class="count bg-white pl20 pr20 pt10 pb10 f26"><span>已选择<i class="sum_num"></i>件商品</span><span class="fr">应付：<span class="red">￥<i class="total"></i></span></span></div>
<div id="dialog-select" class="dialog">
	<i id="close" onclick="BtPopHide('dialog-select')" class="iconfont close">&#xe60b;</i> 
	<h4 class="normal">提示：</h4>
	<p>请选择选择商品</p>
</div>
<style>
.dialog{ border:1px solid #ccc; width:70%; background:#fff; padding:0.05rem 0.15rem; display:none;} 
.dialog h4{ font-size:0.2rem; }
.dialog .close{ font-size:0.2rem; display:block; position:absolute; top:5px; right:10px; }
.select_all .unable{ background:#ccc; }
</style>
<script type="text/javascript" src="js/carts.js"></script>
<script type="text/javascript">
$(function(){
	fnSelect(".select_all", ".carts", ".check");

	$(".carts ul").each(function(){
		var _this=$(this);

		_this.find('.btn_plus').bind('click', function() {
			numPlus($(this), '.num', '.btn_less');
			sum(".select_all", ".carts", ".check",'.count');//计算金额
		});

		//判断当前“减”按钮是否可用
		_this.find('.num_box .num').each(function() {
			var $this=$(this);
			if(parseInt($this.text())==1){
				$this.siblings('.btn_less').addClass('failed');
			}
		});

		_this.find('.btn_less').bind('click', function() {
			numLess($(this), '.num');
			sum(".select_all", ".carts", ".check",'.count');//计算金额
		});

	});
	
	//删除商品
	$('.carts .btn-del').bind('click',function(){
		var $this=$(this);
		$this.parentsUntil('ul').parent().remove();
		sum(".select_all", ".carts", ".check",'.count');//计算金额
	});

});
</script>
<script>
//方法一：
$(function(){

	cartsTotalNum();

	$('.carts .carts_check i').bind('click',function(){
		cartsTotalNum();
	});

	$('.confirm_order').bind('click', function() {
		if($(this).hasClass('unable')){
			return false;
		}else{
			if($('.carts .carts_check i.checked').length==0){
				BtPopload('dialog-select');
			}
		}
	});	

	if($('.carts ul').length==0){
		$('.confirm_order').addClass('unable');
	}

	$('.select_all .check').click(function(){
		cartsTotalNum();
	});

});

function cartsTotalNum(){
	var str='';
	$('.carts .carts_check i').each(function(){
		if($(this).hasClass('checked')){
			if(str==''){
				str=$(this).attr('id');
			}else{
				str=str+','+$(this).attr('id');
			}
		}
	});
	$('#totalcartnumb').val(str);
}



//方法二：
/*$(function(){
	cartsTotalNum();

	$('.carts .carts_check i').bind('click',function(){
		var _this=$(this);
		var str=$('#totalcartnumb').val();
		if(_this.hasClass('checked')){
			if(str==''){
				str=_this.attr('id');
			}else{
				str=str+','+_this.attr('id');
			}
		}else{
			if(str.indexOf(_this.attr('id'))>=0){
				var aStr=str.split(',');
				var aNewStr=[];
				var j=0;
				for(var i=0; i<aStr.length; i++){
					if(aStr[i]!=_this.attr('id')){
						aNewStr[j]=aStr[i];
						j++;
					}
				}
				str=aNewStr.join(',');
			}
		}
		$('#totalcartnumb').val(str);
	});


});

function cartsTotalNum(){
	var str='';
	$('.carts .carts_check i').each(function(){
		if($(this).hasClass('checked')){
			if(str==''){
				str=$(this).attr('id');
			}else{
				str=str+','+$(this).attr('id');
			}
		}
	});
	$('#totalcartnumb').val(str);
}*/
</script>
</body>
</html>